<template>
  <div class="contactus">
    <nav-top title="联系我们" :goback="true"></nav-top>
    <div class="header">
      <div class="img">
        <img src="/static/img/concactus/tellPhone.png" alt />
      </div>
      <div class="text" style="float:left">
        客服热线：
        <br />
        <br />客服微信：
      </div>
      <div class="text-value" style="float:left">
        400-000-2833
        <br />0852-37696145
        <br />likehealth_hk
      </div>
    </div>
    <section>
      <div class="list">
        <img class="wx-icon" src="/static/img/concactus/LOGO.png" alt />
        <span>微信号：</span>
        <span class="value">{{code}}</span>
      </div>
      <div class="list">
        <img class="mail-icon" src="/static/img/concactus/email.png" alt />
        <span>{{email}}</span>
      </div>
      <div class="list">
        <img class="address-icon" src="/static/img/concactus/location.png" alt />
        <span>{{address}}</span>
      </div>
    </section>
    <section class="callback">
      <hr style="visibility:hidden;margin:0" />
      <span>意见反馈</span>
      <van-field
        class="textarea"
        v-model="addressDetail"
        type="textarea"
        placeholder="您的宝贵意见是我们服务提高的机会，我们将认 真聆听。"
      ></van-field>
    </section>
    <div class="opera">
      <button>提交</button>
    </div>
  </div>
</template>

<script>
import NavTop from "@/components/nav/navBar";

export default {
  components: {
    NavTop
  },
  data() {
    return {
      code: "likehealth_hk",
      email: "customer.service@likehealth.com.hk",
      address: "香港湾仔区铜锣湾新宁道1号利园三期4楼"
    };
  }
};
</script>

<style lang='scss' scoped>
.contactus {
  overflow: hidden;
  overflow-y: auto;
}
.header {
  margin: 45px 10px 0 10px;
  height: 118px;
  border-bottom: 1px solid #f8f8f8;
  .img {
    float: left;
    margin: 29px 0 0 32px;
    width: 63px;
    height: 63px;
    img {
      width: 63px;
      height: 63px;
    }
  }
  .text, .text-value {
    margin: 34px 0 0 11px;
    line-height: 20px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(6, 164, 79, 1);
  }
  .text-value{
    margin-left: 0px;
  }
}
.list {
  width: 320px;
  height: 50px;
  margin: 0 10px;
  border-bottom: 1px solid #f8f8f8;
  position: relative;
  .wx-icon{
    position: relative;
    margin: 18px 14px 0 2px;
    width: 10px;
    height: 11px;}
  .mail-icon{
    position: relative;
    top: 3px;
    margin: 15px 9px 0 -1px;
    width: 19px;
    height: 14px;}
  .address-icon{
    position: relative;
    top: 3px;
    margin: 14px 11px 0 1px;
    width: 15px;
    height: 16px;}  
  span {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }
  .value {
    color: rgba(51, 51, 51, 1);
  }
}
.callback {
  margin: 0 auto;
  padding-top: 8px;
  width: 303px;
  height: 168px;
  span {
    margin: 14px 0 10px 0;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(33, 33, 33, 1);
  }
  .textarea {
    margin-top: 10px;
    padding: 0;
    width: 303px;
    height: 132px;
    background: #f5f5f5;
    textarea {
      ::-webkit-input-placeholder,
      :-moz-placeholder,
      ::-moz-placeholder,
      :-ms-input-placeholder {
      }
    }
  }
}
.opera {
  margin: 75px auto;
  text-align: center;
  button {
    width: 297px;
    height: 41px;
    background: #06a44f;
    border: none;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
<style>
.callback .textarea .van-field__control {
  padding: 12px 0 0 11px;
  font-size: 11px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(162, 162, 162, 1);
}
</style>